<template>
	<view>
		<view class="searchBar">
			<uni-search-bar :radius="15" v-model="searchValue" focus @input="changeGlobalData"
				@confirm="enterSearchMusic" @cancel="returnToPrevious" cancelText="返回"></uni-search-bar>
		</view>
		<view class="keyword-box" v-show="!isShowKeywordList">
			<view class="keyword-block" v-show="matchKeywords.length">
				<view class="keyword-list-header">
					<view>猜你想搜</view>
				</view>
				<view class="keyword-old">
					<view @tap="searchIt(keyword)" v-for="(keyword,index) in matchKeywords" :key="index">{{keyword}}
					</view>
				</view>
			</view>
			<view class="keyword-block" v-show="oldKeywordList.length>0">
				<view class="keyword-list-header">
					<view>历史搜索</view>
					<view>
						<image @tap="oldDelete" src="../../static/searchIcons/delete.png"></image>
					</view>
				</view>
				<view class="keyword-old">
					<view @tap="searchIt(keyword)" v-for="(keyword,index) in oldKeywordList" :key="index">{{keyword}}
					</view>
				</view>
			</view>
			<view class="keyword-block">
				<view class="keyword-list-header">
					<view>热门搜索</view>
					<view>
						<image @tap="hotToggle" :src="'../../static/searchIcons/attention'+forbid+'.png'"></image>
					</view>
				</view>
				<view class="keyword" v-if="forbid==''">
					<view class="keyword-each" v-for="(item,index) in hotKeywordList" :key="index"
						@tap="searchIt(item.searchWord)">
						<view class="keyword-index">
							{{(index+1)<10?"&nbsp;&nbsp;"+(index+1)+"&nbsp;&nbsp;&nbsp;":"&nbsp;"+(index+1)+"&nbsp;&nbsp;"}}
						</view>
						<view class="keyword-main">
							<view class="first-line">
								<view class="keyword-title">{{item.searchWord}}</view>
								<view class="keyword-iconUrl" v-if="item.iconUrl">
									<image mode="heightFix" :src="item.iconUrl"></image>
								</view>
							</view>
							<view class="keyword-content">
								{{(item.content.length>=11?cutOutContent(item.content):item.content)}}
							</view>
						</view>
					</view>
				</view>
				<view class="hide-hot-tis" v-else>
					<view>当前搜热门搜索已隐藏</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				keyword: "",
				oldKeywordList: [],
				hotKeywordList: [],
				keywordList: [],
				forbid: '',
				isShowKeywordList: false,
				matchKeywords: ""
			}
		},
		onLoad() {
			this.loadOldKeyword();
			this.loadHotKeyword();
			this.loadingGuess();
		},
		onShow() {
			this.searchValue = getApp().globalData.searchValue
		},
		methods: {
			changeGlobalData() {
				getApp().globalData.searchValue = this.searchValue
				this.loadingGuess()
			},
			async loadingGuess() {
				let keyword = getApp().globalData.searchValue
				if (keyword != "") {
					await this.$afRequest({
						url: "/search/suggest?keywords=" + keyword + "&type=mobile"
					}).then(res => {
						this.matchKeywords = res.data.result.allMatch.map(item => {
							return item.keyword
						})
					})
				} else {
					this.matchKeywords = ""
				}
			},
			enterSearchMusic() {
				if (this.searchValue == "") {
					return
				}
				uni.navigateTo({
					url: "./searchList"
				})
			},
			returnToPrevious() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 前一个页面
				if (beforePage != null) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: "./index"
					})
				}
			},
			loadOldKeyword() {
				uni.getStorage({
					key: 'OldKeys',
					success: (res) => {
						let OldKeys = JSON.parse(res.data);
						this.oldKeywordList = OldKeys;
					}
				});
			},
			async loadHotKeyword() {
				await this.$afRequest({
					url: "/search/hot/detail"
				}).then(res => {
					this.hotKeywordList = res.data.data
				})
			},
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.oldKeywordList = [];
							uni.removeStorage({
								key: 'OldKeys'
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			hotToggle() {
				this.forbid = this.forbid ? '' : '_forbid';
			},
			indexOfFind(str, ch) {
				if (str.indexOf(ch) == -1) {
					return null
				}
				return str.indexOf(ch)
			},
			cutOutContent(str) {
				let index = this.indexOfFind(str, "，") || this.indexOfFind(str, "《") || this.indexOfFind(str, " ") || this
					.indexOfFind(str, "！")
				return str.substr(0, index) || str.substr(0, 2)
			},
			searchIt(data) {
				getApp().globalData.searchValue = data
				this.searchValue = data
				console.log(getApp().globalData.searchValue)
				this.enterSearchMusic()
			}

		}
	}
</script>

<style lang="scss">
	.searchBar {
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		flex-direction: row;
		margin: 0px;
		background-color: #ffffff;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;

		.keyword-block {
			padding: 10upx 0;

			.keyword-list-header {
				width: 94%;
				padding: 10upx 3%;
				font-size: 27upx;
				color: #333;
				display: flex;
				justify-content: space-between;
			}

			.keyword-list-header image {
				width: 40upx;
				height: 40upx;
			}


			.hide-hot-tis {
				display: flex;
				justify-content: center;
				font-size: 28upx;
				color: #6b6b6b;
			}

			.keyword-old {
				width: 94%;
				padding: 3px 3%;
				display: flex;
				flex-flow: wrap;
				justify-content: flex-start;
				display: flex;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 60upx;
					padding: 0 20upx;
					margin: 10upx 20upx 10upx 0;
					height: 60upx;
					font-size: 28upx;
					background-color: rgb(242, 242, 242);
					color: #6b6b6b;
				}
			}

			.keyword {
				width: 94%;
				padding: 3px 3%;
				display: flex;
				flex-flow: wrap;
				justify-content: flex-start;
				display: flex;

				.keyword-each {
					width: 350rpx;
					height: 105rpx;
					display: flex;

					.keyword-index {
						position: relative;
						top: 12rpx;
						font-size: 35rpx;
						color: #FF5A5F;
					}

					.keyword-main {
						.first-line {
							display: flex;

							.keyword-title {
								font-size: 35rpx;
							}

							.keyword-iconUrl {
								image {
									height: 28rpx;
								}
							}
						}

						.keyword-content {
							font-size: 15rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
